<template>
  <div class="birthday_box">
    <!-- <img class="box_bg" src="~@/assets/duZhongTai/birthday.jpg" alt="" srcset=""> -->
    <img class="box_bg" :src="imgUrl" alt="" srcset="" />
    <!-- 头部 -->
    <!-- <div class="birth_header">
      <img
        class="imgOne"
        src="~@/assets/duZhongTai/goHomeOne.png"
        alt=""
        srcset=""
      />
    </div> -->
    <!-- 音乐logo -->
    <div class="birth_bottom">
      <div class="music_box" @click="handleMusic()">
        <img
          v-if="isPlay"
          src="~@/assets/duZhongTai/music.png"
          alt=""
          srcset=""
          :style="{ 'animation-play-state': animat }"
        />
        <img
          v-else
          src="~@/assets/duZhongTai/music.png"
          alt=""
          srcset=""
          :style="{ 'animation-play-state': animat }"
        />
      </div>
      <!-- src="http://134.64.251.212:8084/cpcp/imgUrl/生日快乐歌01.mp3" -->
      <div class="audio_box">
        <audio
          id="audio"
          autoplay
          ref="audio"
          src
          controls
          loop
          controlsList="nodownload"
        ></audio>
      </div>
      <!-- <div>阿斯顿发顺丰的 图片地址{{ imgUrl }} 音频地址{{ autioUrl }}</div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPlay: false,
      animat: "running",
      playFlag: 1,
      imgUrl: "", //图片地址
      autioUrl: "", //音频地址
      btdhkId: "",
    };
  },
  watch: {
    // $route(newVal, oldVal) {
    //   console.error(newVal, oldVal);
    //   // if (newVal.name !== "birthdayHtml") {
    //   //   this.dialogShow = false;
    //   // }
    // },
  },
  activated() {},
  mounted() {
    this.getUrl();
    // this.getAutoplay();
  },
  created() {},
  methods: {
    //获取URL地址
    getUrl() {
      // let srt = `http://134.64.251.212:8084/#/birthdayHtml?btdhkId=6`;
      let srt = window.location.href;
      var reg = srt.substring(srt.indexOf("?") + 1, srt.length).split("&");
      console.log("red==", reg);
      reg.forEach((item) => {
        let data = item.split("=");
        let x = data[0];
        console.info("地址栏", x);
        if (x == "imgUrl") {
          this.imgUrl = data[1];
        }
        if (x == "autioUrl") {
          this.autioUrl = data[1];
        }
        if (x == "btdhkId") {
          this.btdhkId = data[1];
        }
      });
      console.log("imgUrl=", this.imgUrl);
      console.log("autioUrl=", this.autioUrl);
      console.log("btdhkId=", this.btdhkId);
      // alert(this.imgUrl)
      // alert(this.autioUrl)
      if (this.btdhkId) {
        this.getUrlImg(this.btdhkId);
      }
      // if (this.imgUrl && this.autioUrl) {
      //   alert('1111111,进入判断方法')
      //   this.getAutoplay(this.autioUrl);
      // }
    },
    getUrlImg(btdhkId) {
      // alert("进接口")
      console.log("btdhkId=", btdhkId);
      this.$http({
        url: this.$http.adornUrl("/CpcpDuBirthday/selectId"),
        method: "get",
        params: this.$http.adornParams({
          btdhkId: btdhkId,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("data", data.data);
          this.imgUrl = data.data.filePath;
          this.autioUrl = data.data.autioPath;
          console.log("---this.imgUrl===", this.imgUrl);
          console.log("---this.autioUrl===", this.autioUrl);
          if (this.imgUrl && this.autioUrl) {
            this.getAutoplay(this.autioUrl);
          }
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //自动播放
    getAutoplay(autioUrl) {
      console.log("autioUrl=", autioUrl);
      // const audio = this.$refs.audio;
      // audio.play();
      this.$nextTick(() => {
        this.$refs.audio.src = autioUrl;
        this.$refs.audio.play(); //播放
        // this.$refs.audio.pause();//暂停
      });
    },
    //点击logo
    handleMusic() {
      console.log("asdfasdfas");
      this.playFlag++;
      console.log("this.playFlag=", this.playFlag);
      this.isPlay = !this.isPlay;
      this.animat = this.animat == "running" ? "paused" : "running";
      const audio = this.$refs.audio;
      if (this.playFlag % 2 === 0) {
        audio.pause();
      } else {
        audio.play();
      }
    },
  },
};
</script>

<style scoped>
.birthday_box {
  width: 100%;
  height: 100vh;
  /* background: url("~@/assets/duZhongTai/birthday.jpg") no-repeat;
  background-size: 100% 100%; */
  /* background-size: cover; */
  /* background-size: contain; */
  /* padding-top: 100%; */

  position: relative;
}
.birthday_box .box_bg {
  width: 100%;
  height: 100vh;
}
.birth_header {
  height: 2rem;
  line-height: 2rem;
  padding-left: 10px;
}
.imgOne {
  height: 1.5625rem;
}
/* .birth_bottom{
  height: calc(100vh - 2.0rem);
  background: url("~@/assets/duZhongTai/birthday.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
} */
.music_box {
  position: absolute;
  top: 10px;
  right: 10px;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.music_box img {
  z-index: 999;
  animation: spin 4s infinite linear;
}
.audio_box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* z-index: 1; */
  opacity: 0;
}
</style>